<template>
    <view>
        <view class="goods_infobox">
            <view class="goods_type">
                <view class="type_til">商品名称</view>
                <input class="shopname" type="text" placeholder="请输入商品名称" v-model="reqData.ProductName">    
            </view>
            <view class="goods_type">
                <view class="type_til">商品标签</view>
                <input class="shopname" type="text" placeholder="请输入商品标签" v-model="reqData.Tags">    
            </view>
            <view class="goods_type">
                <view class="type_til">商品分类</view>
                <view class="type_arrbox" @click="showtype = true">
                    <view class="type_arr">{{typeText?typeText[0]:'请选择'}}</view>
                    <image class="type_img" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711011951088796.png"></image>
                </view>     
            </view>
            <view class="goods_title_box">
                <view class="goods_til">商品标题</view>
                <input class="goods_text" type="text" placeholder="请填写商品名称、产地等关键信息" v-model="goodtitle">
                <view class="goods_mainimg">
                    <view class="item"  v-for="(item,index) in mainimg" :key="index">
                        <view class="del_con" @click.stop="delmainImg(index)">
                            <uni-icons type="closeempty" color="#fff" size="16"></uni-icons>
                        </view>
                        <image :src="item.tempUrl" mode="aspectFill" />
                    </view>
                    <image class="main_icon" v-if="mainimg.length < 9" src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17321787826561148.png" @click="uploadmain"></image>
                </view>
            </view>
        </view>
        <view class="goods_delimgbox">
            <view class="goods_deltil">商品详情图</view>
            <view class="goods_delimg">
                <view class="item"  v-for="(item,index) in detailsimg" :key="index">
                    <view class="del_con" @click.stop="delImg(index)">
                        <uni-icons type="closeempty" color="#fff" size="16"></uni-icons>
                    </view>
                    <image :src="item.tempUrl" mode="aspectFill" />
                </view>
                <image class="del_icon" v-if="detailsimg.length < 9" src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17321787619411200.png" @click="uploaddetails"></image>
            </view>
        </view>
        <view class="goods_grow" v-for="(item,index) in specList" :key="index">
            <view class="grow">
                <view class="grow_til">商品规格</view>
                <input class="grow_input" type="text" placeholder="请填写" v-model="item.Style">
            </view>
            <view class="grow">
                <view class="grow_til">商品售价</view>
                <input class="grow_input" type="text" placeholder="请填写" v-model="item.Price">
            </view>
            <!-- <view class="grow">
                <view class="grow_til">库存</view>
                <input class="grow_input" type="text" placeholder="请填写">
            </view> -->
            <view class="grow_sp" v-if="index == (specList.length - 1)" @click="sp_add">
                <image class="sp_img" src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17321798393631354.png"></image>
                <view class="sptitle">添加商品规格</view>
            </view>
            <view class="grow_sp" v-else>
                <image class="sp_imgdel" src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17322568049101191.png"></image>
                <view class="sp_del" @click="sp_delList(index)">删除规格</view>
            </view>
        </view>

        <view class="bottombox">
            <view class="bottombtn">
                <!-- <view class="draft_btn">保存草稿</view> -->
                <view class="add_btn" @click="Publish">{{'保存'}}</view>
            </view>
        </view>

        <!-- 商品分类 -->
        <u-picker :show="showtype" immediateChange @confirm="setShopType"  @cancel="showtype = false" :columns="shoptypeList"></u-picker>
    </view>
</template>

<script>
export default {
components: {},
data() {
return {
    showtype:false,
    typeText:[],
    goodtitle:'',
    mainimg:[],
    detailsimg:[],
    specList:[
        {
            Style:'',
            Price:'',
        },
    ],
    shoptypeList:[],
    typeList:[],
    reqData:{
        ProductName:'', // 商品名称
        ProductNo:'',//商品编号
        ProductCatalog:'',//商品分类ID
        Images:'',// 商品主图
        Description:'',//商品详情
        Tags:'', // 标签
    },
    shop:{},
    shopID:''
};
},
onLoad(e){
    this.shopID = e.id
    this.GetProduct()
    this.shopDetail()
},
methods: {
    async shopDetail(){
        let res = await this.$api.post('Products/Detail',{
            ID:this.shopID
        })
        if(res.code == 0){
            this.reqData.ProductName = res.data.ProductName
            this.reqData.ProductNo = res.data.ProductNo
            this.reqData.ProductCatalog = res.data.ProductCatalog
            if(res.data.Images){
                let list = res.data.Images.split(',')
                for (let i = 0; i < list.length; i++) {
                    this.mainimg.push(
                        {
                            tempUrl:list[i],
                            netPath:list[i],
                        }
                    )
                }
            }
            if(res.data.Description){
                let list2 = res.data.Description.split(',')
                for (let i = 0; i < list2.length; i++) {
                    this.detailsimg.push(
                        {
                            tempUrl:list2[i],
                            netPath:list2[i],
                        }
                    )
                }
            }
            
            this.reqData.Tags = res.data.Tags
            this.specList = res.data.ProductStyleList
            this.shop = res.data
            for (let i = 0; i < this.typeList.length; i++) {
                if(res.data.Type == this.typeList[i].ID){ 
                    this.typeText.push(this.typeList[i].CataName)
                    break
                }

            }
        }
        
    },
    delmainImg(index) {
      this.mainimg.splice(index, 1);
    },
    delImg(index) {
      this.detailsimg.splice(index, 1);
    },
    setShopType(e){
        this.typeText = e.value
        this.showtype = false
        for (let i = 0; i < this.typeList.length; i++) {
            if(this.typeText == this.typeList[i].CataName){
                this.reqData.ProductCatalog = this.typeList[i].ID
                return
            }
            
        }
    },
    async GetProduct(){
        let list = []
        let res = await this.$api.post('Products/GetProductCatalog')
        if(res.code == 0){
            this.typeList = res.data
            for (let i = 0; i < res.data.length; i++) {
                list.push(res.data[i].CataName)
                
            }
            this.shoptypeList.push(list)
        }
    },
    async Publish(){
        let _this = this
        let main_img = []
        for (let i = 0; i < this.mainimg.length; i++) {
            main_img.push(this.mainimg[i].netPath)
        }
        this.reqData.Images = main_img.join(',')
        let deta_img = []
        for (let i = 0; i < this.detailsimg.length; i++) {
            deta_img.push(this.detailsimg[i].netPath)
        }
        this.reqData.Description = deta_img.join(',')
        let itemJson = JSON.stringify(this.specList)
        //商品编辑 
        let res = await this.$api.post('Product/Edit',{
            ...this.reqData,
            ID:this.shopID
        })
        //商品规格编辑
        for (let i = 0; i < this.specList.length; i++) {
            if(this.specList[i].ID){
                let res1 = await this.$api.post('Product/EditStyle',{
                    ID:this.specList[i].ID,
                    Style:this.specList[i].Style,
                    Price:this.specList[i].Price
                })
            }else{
                let res1 = await this.$api.post('Product/AddStyle',{
                    ProductID:this.shopID,
                    Style:this.specList[i].Style,
                    Price:this.specList[i].Price
                })
            }
            
        }
        this.$pv.msg('修改成功');
        uni.navigateBack({
            delta: 1 
        });
    },
    sp_add(){
        this.specList.unshift({
            Style:'',
            Price:'',
        })
    },
    async sp_delList(index){
        let _this = this
        uni.showModal({
            title: "温馨提示",
            content: "您确定要删除这条规格吗?",
            confirmText: "确定",
            success: async function (res) {
                if (res.confirm) {
                    let res1 = await _this.$api.post('Product/DeleteStyle',{
                        ID:_this.specList[index].ID,
                        Style:_this.specList[index].Style,
                        Price:_this.specList[index].Price
                    })
                    if(res1.code == 0){
                        _this.$pv.msg('删除成功');
                        _this.specList.splice(index,1)
                    }else{
                        _this.$pv.msg('删除失败');
                    }
                } else if (res.cancel) {
                }
            },
        });
        
    },
    //文件上传
		async uploading(url, tempKey) {
			const r = await this.$upload(url, (pro) => {
				for (let i = 0; i < this.mainimg.length; i++) {
					if (this.mainimg[i].tempKey == tempKey) {
						this.mainimg[i].pro = pro;
					}	
				}
			});
			console.log(r,'r');
			for (let i = 0; i < this.mainimg.length; i++) {
				if (this.mainimg[i].tempKey == tempKey) {
					this.mainimg[i].netPath = r;
				}
                console.log('net');
                
			}
            console.log(this.mainimg);
			this.$pv.closeLoad()
			// this.reqData.Images.push(r)
		},
		uploadmain() {
			let _this = this;
			let imglength = this.mainimg.length || 0
			uni.chooseMedia({
				count: 9-imglength,
				mediaType: ['image'],
				sourceType: ['album', 'camera'],
				maxDuration: 30,
				camera: 'back',
				async success(res) {
					console.log(res,'res');
					for (let i = 0; i < res.tempFiles.length; i++) {
							let o = {
								duration: 0,
								fileType: res.tempFiles[i].fileType,
								tempUrl: res.tempFiles[i].tempFilePath,
								flieUrl: res.tempFiles[i].tempFilePath,
								tempKey: uni.$u.guid(8),
								pro: 0,
							};
						_this.mainimg.push(o);
						let rex = await _this.uploading(o.flieUrl, o.tempKey);
					}
				},
			});
		},
        async uploadDeing(url, tempKey) {
			const r = await this.$upload(url, (pro) => {
				for (let i = 0; i < this.detailsimg.length; i++) {
					if (this.detailsimg[i].tempKey == tempKey) {
						this.detailsimg[i].pro = pro;
					}	
				}
			});
			console.log(r,'r');
			for (let i = 0; i < this.detailsimg.length; i++) {
				if (this.detailsimg[i].tempKey == tempKey) {
					this.detailsimg[i].netPath = r;
				}
                console.log('net');
                
			}
            console.log(this.detailsimg);
			this.$pv.closeLoad()
			// this.reqData.Images.push(r)
		},
        uploaddetails() {
			let _this = this;
			let imglength = this.detailsimg.length || 0
			uni.chooseMedia({
				count: 9-imglength,
				mediaType: ['image'],
				sourceType: ['album', 'camera'],
				maxDuration: 30,
				camera: 'back',
				async success(res) {
					console.log(res,'res');
					for (let i = 0; i < res.tempFiles.length; i++) {
							let o = {
								duration: 0,
								fileType: res.tempFiles[i].fileType,
								tempUrl: res.tempFiles[i].tempFilePath,
								flieUrl: res.tempFiles[i].tempFilePath,
								tempKey: uni.$u.guid(8),
								pro: 0,
							};
						_this.detailsimg.push(o);
						let rex = await _this.uploadDeing(o.flieUrl, o.tempKey);
					}
				},
			});
		},
},

}
</script>
<style lang='scss'>
page{
    background-color: #f6f6f6;
}
.goods_infobox{
    background-color: #fff;
    margin-top: 16rpx;
    padding-bottom: 32rpx;
    .goods_type{
        width: calc(100%-32rpx);
        height: 106rpx;
        margin-left: 32rpx;
        border-bottom: 1rpx solid #e4e4e4;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 32rpx;
        box-sizing: border-box;
        .shopname{
            flex: 1;
            text-align: right;
            font-size: 32rpx;
        }
        .type_til{
            font-size: 32rpx;
            color: #333333;
        }
        .type_arrbox{
            display: flex;
            align-items: center;
            .type_img{
                width: 32rpx;
                height: 32rpx;
            }
            .type_arr{
                font-size: 32rpx;
                color: #333333;
            }
        }
    }
    .goods_title_box{
        margin-top: 30rpx;
        padding-left: 32rpx;
        box-sizing: border-box;
        .goods_til{
            font-size: 32rpx;
            color: #333333;
            margin-bottom: 24rpx;
        }
        .goods_text{
            font-size: 32rpx;
            color: #333333;
            margin-bottom: 48rpx;
        }
        .goods_mainimg{
            display: flex;
            flex-wrap: wrap;
            // justify-content: space-between;
            .item {
                position: relative;
                // margin-top: 15rpx;
                margin-right: 24rpx;
                margin-bottom: 24rpx;
                width: 152rpx;
                height: 152rpx;
                background-color: #eee;
                border-radius: 16rpx;

                .pro {
                    position: absolute;
                    top: 50%;
                    width: 100%;
                    transform: translateY(-50%);
                    text-align: center;
                    color: #3a3a3a;
                }

                image {

                    height: 100%;
                    width: 100%;
                    border-radius: 16rpx;
                }

                .del_con {
                    position: absolute;
                    top: 0;
                    right: 0;
                    background: rgba(0, 0, 0, 0.4);
                    height: 40rpx;
                    width: 40rpx;
                    text-align: center;
                    line-height: 40rpx;
                    border-radius: 0 16rpx 0 16rpx;
                }
            }
            .main_icon{
                width: 152rpx;
                height: 152rpx;
                // margin-left: 24rpx;
            }
        }
    }
}
.goods_delimgbox{
    background-color: #fff;
    padding-left: 32rpx;
    padding-bottom: 32rpx;
    box-sizing: border-box;
    margin-top: 16rpx;
    .goods_deltil{
        font-size: 32rpx;
        color: #333333;
        margin: 30rpx 0 24rpx 0;
    }
    .goods_delimg{
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;
        .item {
                position: relative;
                margin-right: 24rpx;
                margin-bottom: 24rpx;
                width: 152rpx;
                height: 152rpx;
                background-color: #eee;
                border-radius: 16rpx;

                .pro {
                    position: absolute;
                    top: 50%;
                    width: 100%;
                    transform: translateY(-50%);
                    text-align: center;
                    color: #3a3a3a;
                }

                image {

                    height: 100%;
                    width: 100%;
                    border-radius: 16rpx;
                }

                .del_con {
                    position: absolute;
                    top: 0;
                    right: 0;
                    background: rgba(0, 0, 0, 0.4);
                    height: 40rpx;
                    width: 40rpx;
                    text-align: center;
                    line-height: 40rpx;
                    border-radius: 0 16rpx 0 16rpx;
                }
            }
        .del_icon{
            width: 152rpx;
            height: 152rpx;
        }   
    }
}
.goods_grow{
    background-color: #fff;
    margin-top: 16rpx;
    .grow{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: calc(100% - 32rpx);
        height: 104rpx;
        margin-left: 32rpx;
        border-bottom: 1rpx solid #e4e4e4;
        padding-right: 32rpx;
        box-sizing: border-box;
        .grow_til{
            width: 150rpx;
            font-size: 32rpx;
            color: #333333;
        }
        .grow_input{
            flex: 1;
            text-align: right;
            font-size: 32rpx;
        }
    }
    .grow_sp{
        display: flex;
        align-items: center;
        width: calc(100% - 32rpx);
        height: 104rpx;
        margin-left: 32rpx;
        .sp_img{
            width: 40rpx;
            height: 40rpx;
        }
        .sptitle{
            font-size: 32rpx;
            color: #FF6030;
            margin-left: 16rpx;
        }
        .sp_imgdel{
            width: 32rpx;
            height: 32rpx;
            margin-left: auto;
        }
        .sp_del{
            font-size: 28rpx;
            color: #FF6030;
            margin: 0 32rpx 0 8rpx;
        }
    }
}
.bottombox{
    width: 100%;
    height: 196rpx;
    .bottombtn{
        width: 100%;
        height: 196rpx;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: space-around;
        z-index: 10;
        .draft_btn{
            width: 200rpx;
            height: 88rpx;
            border-radius: 44rpx;
            border: 2rpx solid #E4E4E4;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32rpx;
        }
        .add_btn{
            width: 454rpx;
            height: 88rpx;
            background: linear-gradient( 98deg, #FFAD26 0%, #FE4E01 100%);
            border-radius: 44rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32rpx;
            color: #fff;
        }
    }
}
</style>